<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- v-on 完整语法处理事件 -->
			<button v-on:click = "doSome">点一下试试</button>
			<!-- v-on 简写 -->
			<button @click = "doSome">再点一下试试</button>
			<!-- 可以传入自定义的参数 -->
			<button @click = "delById(1001)">删除</button>
			<!-- 使用占位符保留默认参数的传递 , $event 为固定的占位符，在参数列表中的位置可以任意，接收参数时对应正确即可-->
			<button @click = "delById2($event,1001)">删除2</button>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					
				},
				methods: {
					// 默认会接收到一个参数，表示被事件对象
					doSome(e) {
						console.log(e)
						// 事件发生的目标对象
						console.log(e.target)
					},
					// 接收自定义的参数
					delById(id) {
						console.log('根据ID删除数据：' , id)
					},
					// 接收默认参数和自定义的参数
					delById2(e,id) {
						console.log(e)
						console.log('根据ID删除数据：' , id)
					}
				},
			})
		</script>
	</body>
</html>